<!--编辑页面-->

<template>
  <div style="margin:auto; autotext-align: center; font-size: 18px; font-weight: bold; padding: 15px" >
    编辑用户
  </div>
  <el-form
      label-width="auto"
      :model="userInfo"
      style="max-width: 600px;margin: auto"
  >
    <el-form-item label="昵称 ">
      <el-input v-model="userInfo.nick" />
    </el-form-item>

    <el-form-item label="密码 ">
      <el-input v-model="userInfo.password" />
    </el-form-item>

    <el-form-item label="性别">
      <el-input v-model="userInfo.sex" />
    </el-form-item>

    <el-form-item label="手机号">
      <el-input v-model="userInfo.phone" />
    </el-form-item>

    <el-form-item label="邮箱">
      <el-input v-model="userInfo.email" />
    </el-form-item>

    <el-form-item label="地址">
      <el-input v-model="userInfo.address" />
    </el-form-item>

    <el-form-item label="上传头像">
      <el-upload
          ref="uploadImageRef"
          class="avatar-uploader"
          :action="'http://localhost:9090/api/users/image?id='+id"
          accept="image/jpg,image/png,image/jpeg"
          limit="1"
          :on-success="imageSuccess"
          :on-error="imageError"
          :file-list="imageFileList"
          :show-file-list="true"
          :auto-upload="false">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
      <span style="color: aquamarine">&nbsp;{{imageTip}}</span>
    </el-form-item>


    <el-form-item label="上传合同">
      <el-upload
          ref="uploadContractRef"
          class="avatar-uploader"
          :action="'http://localhost:9090/api/users/contract?id='+id"
          accept="application/pdf"
          limit="1"
          :on-success="contractSuccess"
          :on-error="contractError"
          :file-list="contractFileList"
          :show-file-list="true"
          :auto-upload="false">
        <img v-if="contractUrl" :src="contractUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
      <span style="color: aquamarine">&nbsp;{{contractTip}}</span>
    </el-form-item>


    <el-form-item>
      <el-button type="success" @click="submitUpload">提 交</el-button>
    </el-form-item>

  </el-form>
</template>


<script setup>
import {onMounted, ref} from "vue";
 import {useRoute} from "vue-router";
import {doGet, doPut} from "../http/httpRequest.js";

 let userInfo = ref({});
 let uploadImageRef = ref({})
 let uploadContractRef = ref({})

 let imageFileList = ref([])
 let contractFileList = ref([])

 let imageTip = ref("")
 let contractTip = ref("")

 // 获取动态路由地址中的id参数
 let route = useRoute()
 let id = route.params.id

 // 根据id查询用户信息
 onMounted(() => {
   doGet("api/users/" + id ,{}).then(res =>{
     if(res.data.code === 200){ // 使用“===”不仅判断值是否相等还判断类型是否相等
       userInfo.value = res.data.data   // 获取用户信息并赋值给userInfo
     }
   })
 })

 function submitUpload(){
   //提交用户信息
    let formData = new FormData();
    for(let field in userInfo.value){
      if(field !="userContractDO" && field !="userImageDO"){
        if(userInfo.value[field]){
          formData.append(field, userInfo.value[field])
        }
      }
    }
   doPut("/api/user", formData).then(resp => {
     if (resp.data.code === 200) {
       console.log("更新成功......")
     }
   })

   uploadImageRef.value.submit()//上传的图片大小不要过大，不然会导致上传失败
   uploadContractRef.value.submit()

 }

 function imageSuccess(){
    imageFileList.value = []
   //提示一下
   imageTip.value = "上传成功"
 }
 function imageError(){
   imageFileList.value = []
   //提示一下
   imageTip.value = "上传失败"
 }
 function contractSuccess(){
   contractFileList.value = []
   //提示一下
   contractTip.value = "上传成功"
 }
 function contractError(){
   contractFileList.value = []
   //提示一下
   contractTip.value = "上传失败"
 }
</script>


<style>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>